<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" href="../css/iconfont.css">

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
		<script src="../js/miva.utils.js" type="text/javascript" charset="utf-8"></script>


    <link rel="stylesheet" type="text/less" href="../css/entry.less"/>
    <script src="../js/less.js" type="text/javascript" charset="utf-8"></script>

    <style media="screen">
      .mui-bar {
        box-shadow: none;
      }
      .login-body {
        padding: 10% !important;
				font-size: 1rem;
      }
      .input-box {
        padding:10px 0;
      }
			.other-log {
				display: flex;
				justify-content: space-around;
				padding: 0 10%;
				padding-top: 50%;
			}
			.other-log span{
				font-size: 50px;
				color: #999;
			}
			.pwd-about {
				display: flex;
				justify-content: space-between;
				padding: 10px;
			}
			.pwd-about span:nth-child(2) {
				color: #e45050;
			}

			.login-tip {
				padding: 30px 9%;
				text-align: center;
				font-size: .9rem;
			}
			.login-tip span {
				text-decoration: underline;
				font-weight: bold;
			}
    </style>
	</head>
	<body style="background: #fff">
    <div class="register" id="app">
      <header class="mui-bar mui-bar-nav">
  			<a style="color: #999; font-size:45px; padding-top:0" class="mui-action-back mui-icon mui-icon-closeempty mui-pull-right"></a>
  			<h1 class="mui-title">登录</h1>
  		</header>
  		<div class="mui-content">
  			<div class="login-body form-box">
          <div class="input-box phone-box">
						<span class="mui-icon mui-icon-help path-num"></span>
						<input v-model="phone" type="text" placeholder="手机号">
					</div>
          <div class="input-box phone-box">
						<span class="mui-icon mui-icon-help path-num"></span>
						<input v-model="pwd" type="password" placeholder="密码">
					</div>
          <div @tap="login" class="submit-btn">登录</div>
					<div class="pwd-about">
						<span>忘记密码</span>
						<span @tap="gotoRegister">手机号注册</span>
					</div>
        </div>
        <div class="other-log">
          <span class="iconfont icon-QQ"></span>
					<span style="position: relative;top:-3px" class="iconfont icon-weixin"></span>
					<span class="iconfont icon-weibo"></span>
        </div>
				<div class="login-tip">
					登录即代表您已同意<span>服务条款</span>和<span>隐私策略</span>
				</div>
  		</div>
    </div>

    <script type="text/javascript">

      new Vue({
        el: '#app',
        data: {
          bookId: mivaUtils.getBookId(window.location.search),
					phone: '',
					pwd: '',
        },
				created() {},
        mounted() {},
        methods: {
					login() {
						const params = new URLSearchParams();
						params.append('tel', this.phone);
						params.append('pwd', this.pwd);

						axios.post(
							mivaUtils.baseUri + '/Mobile/Index/login',
							params,
							{'Content-type': 'application-www-urlencoded'}
						).then(res=> {
							console.log(res);
							mui.toast(res.data.msg)
							if(res.data.code == 1) {
								localStorage.setItem('token', res.data.result.token)
								mui.back()
							}
						})
					},
					gotoRegister() {
						mui.openWindow({
							url: './registerPage.html',
							id: 'register',
						})
					},
				},
      })
    </script>
	</body>
</html>
